<template>
  <div>
    <div class="select-box">
      <el-form :inline="true" :model="selectData" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="selectData.title" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item label="详情">
          <el-input v-model="selectData.introduce" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="id" width="180" />
      <el-table-column prop="title" label="标题" width="180" />
      <el-table-column prop="introduce" label="详情" />
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { getGoodsList } from "../request/api";
import { InitData } from "../type/goods";
export default defineComponent({
  setup() {
    const data = reactive(new InitData());
    getGoodsList()
      .then((res) => {
        console.log(res);
        data.list = res.data;
      })
      .catch((err) => {
        console.log(err);
        data.list = err.data;
      });

    return { ...toRefs(data) };
  },
});
</script>

<style scoped>
</style>